<template>
  <div>
    <div class="nav-option">
          <span class="option-name">{{rootData.title }}</span>
          <div class="option-progress">
            <el-progress :percentage="(rootData.maded/rootData.all)*100>=100?99:(rootData.maded/rootData.all)*100||0" :show-text="false" />
            <span class="progress-num">{{rootData.maded}}/{{ rootData.all}}</span>
          </div>
          <el-link type="primary" :underline="false" @click="$refs.kfdialog.customerDialogs=true">增购</el-link>
          <slot name="getchange"></slot>
        </div>
        <kf-dialog :content="'如需增购权限，请联系下方专属客服！'" ref="kfdialog"></kf-dialog>
  </div>
</template>

<script>
import kfDialog from '@/components/kfdialog/index.vue'
export default {
  components: {
    kfDialog
  },
props:{
    rootData:Object
}
}
</script>

<style lang="scss" scoped>
    .nav-option {
      @include flex(row, center, flex-start);
      margin-right: 25px;
      i {
        font-size: 14px;
        color: #4F5862;
        margin-right: 10px;
      }
      .option-name {
        color: #202933;
        font-size: 14px;
        margin-right: 20px ;
      }
      .option-progress {
        @include flex(row, center, center);
        margin-right: 20px;
        .progress-num {
          font-size: 14px;
          color: #202933;
        }
      }
      ::v-deep .el-progress{
        width: 120px;
        margin-right: 20px;
        .el-progress-bar {
          border-radius: 0;
          .el-progress-bar__outer {
            border-radius: 0;
            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
</style>